<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Geometry几何体</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<!--dat.GUI 实现页面调试-->
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, geometry, material, mesh;
    

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
        camera.position.set(0, 0, 15);
    }

    //创建模型
    function initMesh() {
        //立方体
       /* geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
        material = new THREE.MeshNormalMaterial(); //创建材质*/
        //圆形
        /*geometry = new THREE.CircleGeometry(5,32); //创建几何体
        material = new THREE.MeshBasicMaterial({color:0xffff00}); //创建材质*/
        //圆锥
        /*geometry = new THREE.ConeGeometry(5,5,8); //创建几何体
        material = new THREE.MeshBasicMaterial({color:0xffff00}); //创建材质*/
        // 圆柱
        /*geometry = new THREE.CylinderGeometry(3,3,5,8); //创建几何体
        material = new THREE.MeshBasicMaterial({color:0xffff00});*/
        // 球
        /*geometry = new THREE.SphereGeometry(3,32,32); //创建几何体
        material = new THREE.MeshNormalMaterial({color:0xffff00});*/

        // 平面
        /*geometry = new THREE.PlaneGeometry(5,5,32); //创建几何体
        material = new THREE.MeshNormalMaterial({color:0xffff00});*/
        // 圆环
        geometry = new THREE.TorusGeometry(1,0.4,16,100); //创建几何体
        material = new THREE.MeshNormalMaterial({color:0xffff00});

        mesh = new THREE.Mesh( geometry, material ); //创建网格
        mesh.visible=true;
        mesh.name="mesh1";
        // 修改位置方法1
        mesh.position.x = 0;//将模型的位置调整到x正轴距离原点为3的位置。
        mesh.position.y += 0; //将模型的y轴位置以当前的位置向上移动5个单位。
        mesh.position.z -= 0;//将模型的z轴往后退
        scene.add( mesh ); //将网格添加到场景

        
    }
    rotate = true;
    //运行动画
    function animate() {
        requestAnimationFrame(animate); //循环调用函数
        if(rotate){
            // mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
            mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
            // mesh.rotation.z += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

            /*mesh2.rotation.x -= 0.01; //每帧网格模型的沿x轴旋转0.01弧度
            mesh2.rotation.y -= 0.02; //每帧网格模型的沿y轴旋转0.02弧度*/
        }
        

        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();

        animate();//运行动画
        

    }
    window.setTimeout(function(){
    	// scene.remove(mesh);3秒后移除
    	var curmesh = scene.getObjectByName("mesh1");
    	//console.log(curmesh);

    	// curmesh.visible=false;//隐藏网格

    	// 遍历3D对象
        /*scene.traverse(function(child){
        	console.log(child);
        });*/
        //获取对象父元素，每个对象都有
        // console.log(mesh.parent === scene);

        // 修改 3D 对象的位置，大小和转向
        // 修改位置方法1
        /*mesh.position.x = 3;//将模型的位置调整到x正轴距离原点为3的位置。
        mesh.position.y += 5; //将模型的y轴位置以当前的位置向上移动5个单位。
        mesh.position.z -= 6;//将模型的z轴往后退*/
		// 修改位置方法2
        // mesh2.position.set(-1,0,3);//直接将模型的位置设置在x轴为1，y轴为2，z轴为3的位置
		// 修改位置方法2
        // mesh2.position = new THREE.Vector3(-1,0,3);//无效

        // 修改大小的方式(原地放大)
        // 方式1
        /*mesh2.scale.x = 2;//模型沿x轴放大1倍
        mesh2.scale.y = 0.5; //模型沿y轴缩小一倍
        mesh2.scale.z = 1; //模型沿z轴保持不变*/
        // 方式2
        /*mesh2.scale.set(2,2,2);
        mesh2.scale.set(0.5, 0.5, 0.5); //每个方向等比缩小一倍*/

        // 修改模型的转向
        /*mesh2.rotation.x=Math.PI;//模型沿x旋转180度
		mesh2.rotation.y = Math.PI ; //模型沿y轴旋转360度，跟没旋转一样的效果。。。
		mesh2.rotation.z = - Math.PI / 2; //模型沿z轴逆时针旋转90度
		mesh2.rotation.set(Math.PI, 0, - Math.PI / 2, "YZX"); //先沿y轴旋转180度，再沿z轴旋转0度，最后沿x轴逆时针旋转90度*/
		// mesh2.rotation = new THREE.Euler(Math.PI, 0, - Math.PI / 2, "YZX"); //无效果

        controls = {
            rotate:true
            };
		//dat.GUI 实现页面调试
		gui = new dat.GUI();
		gui.add(controls, "rotate").name("旋转").onChange(updatePosition);
		

		function updatePosition(e) {
		    rotate=e;
		}
    },3000);
</script>
</body>
</html>